
import React from "react";
import { MHeader, MFooter } from './../components/page/home'
import Home from './home'
import OnLineHelpPage from './onlinehelp'
import DocumentPage from './document'
import 'antd/dist/antd.css';
import scss from './../assets/styles/cloudmap.module.scss';

const header = [
    { id: 0, title: '首页' },
    { id: 1, title: '在线文档' },
    { id: 2, title: '开发API' }
];

interface State {
    area: number;
    PageAddItem: any;
}
interface Props {

}
export default class CloudMapIndex extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = {
            area: 0,
            PageAddItem: {}
        }
    }
    componentDidMount() {

        this.Initialize()
    }
    // 初始化页面
    Initialize = () => {
        this.setState({
            PageAddItem: {
                0: <Home />,
                1: <OnLineHelpPage />,
                2: <DocumentPage />,
            }
        })
    }
    // 页面切换
    createPage = (su: any) => {
        this.setState({
            area: su
        })
    }
    // 页面数据更新
    get pageElements() {
        const { area, PageAddItem } = this.state;

        return PageAddItem[area];
    }
    render() {
        return (
            <div className={scss['cloud-home']}>
                <div className={scss['cloud-title']}>
                    <MHeader
                        headerList={header}
                        headerOnClick={(e) => this.createPage(e)}
                    />
                </div>
                <div className={scss['cloud-page']}>
                    {/* 内容加载  */}
                    {this.pageElements}
                </div>
                <MFooter footerList={[]} />

            </div>
        )
    }
}